<!DOCTYPE html>
<html lang="zh-CN">

<head>
    {% include 'header_content' %}
	{{  'public.js' | public_assets_content  }}
	<link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_url }}">
    {% get_script_content route={template_route} scope=0 position=0 %}

    <style type="text/css">

		#module_freedomain_login{
			display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 100vh;
		    text-align: center;
				width:530px;
				margin: 0 auto;
		}
		.module_freedomain_login_wrapper{
			width: 100%;
		}
		#module_freedomain_login .logo{
			margin-bottom: 60px;
			font-size: 0;

		}
    	#module_freedomain_login .logo a{
		    font-size: var(--title_font_size);
		    color: var(--title_color);
		    font-family: var(--title_font_family);
		    font-style: var(--title_font_style);
		    font-weight: var(--title_font_weigth);
		    letter-spacing: var(--title_letter_spacing);
				line-height: 1;
				display: inline-flex;
				align-items: center;
		}
		#module_freedomain_login .logo span{
			font-weight: bold;

		}
		#module_freedomain_login .logo img{
		    max-height: 60px;
		    max-width: 300px;
		}
		#module_freedomain_login .logo img.favicon{
			width: 36px;
			height: 36px;
			margin-right: 16px;
		}
		#module_freedomain_login .logo .logo-block{
				height: 36px;
		    width: 36px;
				font-size:18px;
				line-height:36px;
				text-align:center;
				margin-right:16px;
				background: #242F48;
				border-radius: 4px;
				color: rgba(255, 255, 255, 0.7);

		}
		#module_freedomain_login .module_freedomain_login_header{
			margin-bottom: 40px;

		}
		#module_freedomain_login .module_freedomain_login_title{
			font-size: 24px;
			line-height: 1.3;
			color: var(--title_color);
		}
		#module_freedomain_login .module_freedomain_login_detail{
			margin-top: 20px;
		}
		#module_freedomain_login .mo-form{
			display: flex;
			width: 100%;
		}
		#module_freedomain_login .mo-form-input{
			height: 48px;
		}
		#module_freedomain_login .mo-form .form_btn{
			min-width: 120px;
			margin-left: 10px;
		}
		@media screen and (max-width: 767px){
			#module_freedomain_login{
				width: 100%;
				padding: 0 15px;
				box-sizing: border-box;
			}
			#module_freedomain_login .mo-form{
				display: inline;
			}
			#module_freedomain_login .mo-form .form_btn{
			width: 100%;
			margin-left: 0;

			}
			#module_freedomain_login .module_freedomain_login_title{
				font-size: 18px;
			}
			#module_freedomain_login .logo{
				margin-bottom: 40px;
			}
		}
    </style>
</head>

<body>
    <div class="module_freedomain_login_default" id="module_freedomain_login">
		<div class="module_freedomain_login_wrapper">
			<div class="logo">
				<a >
					{% if storeConfig.logo %}
		      		<img src="{{ storeConfig.logo}}">
					{% else %}
		      		{% if storeConfig.favicon %}<img class="favicon" src="{{ storeConfig.favicon }}" >{% endif %}
		      		<span class="shop_name">{{ storeConfig.name }}</span>
		      		{% endif %}
				</a>
			</div>
			<div class="module_freedomain_login_header">
				<div class="module_freedomain_login_title">{{lang.general.store_password}}</div>
				<div class="module_freedomain_login_detail">{{ value }}</div>
			</div>
			<div class="mo-form" id="login-form">
				<div class="mo-form-item" name="access_password" style="flex:1">
					<div class="mo-form-item-value">
						<input class="mo-form-input" type="text" name="password" placeholder="{{lang.customers.login.rule_password_placeholder}}">
					</div>
				</div>
				<div class="mo-form-item">
					<div class="mo-form-item-value">
						<div class="main_btn form_btn" id="confirm">{{lang.customers.login.confirm}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    
    <script type="text/javascript">
    (function () {
    	const rules = {};
        const form = moi.form("#login-form",rules);
				const passwordNode = $(".mo-form-input[name='password']")
        $("#confirm").click(function () {
				if (passwordNode.val()) {
					//显示加载
					const load = moi.nodeShowLoading(this);
					const params = moi.paramsValueString(form.allValue());
					moi.ajax({
						url: "/module/freedomainlogin",
						type: "post",
						data: JSON.stringify(params),
						complete: function () {
							load.close();
						},
						success: function (data) {
							if (data.data.data) {
								window.location.reload()
							} else {
								moi.tooltip({
									placement: "top",
									el: passwordNode,
									timer: 2000,
									space: 0,
									content: "{{lang.general.password_error}}"
								})
							}
						}
					});
				} else {
					moi.tooltip({
						placement: "top",
						el: passwordNode,
						timer: 2000,
						space: 0,
						content: "{{lang.customers.login.rule_password_placeholder}}"
					})
				}
			});
    })();
		</script>
    {% get_script_content route={template_route} scope=0 position=1 %}
</body>

</html>

